<template>
  <div class="bottom">
    <div class="footer">
      <div class="w1200">
        <div class="footer_down">
          <div class="left">
            <h3>IT帮</h3>
            <p>
              <a href="#">工作机会</a>
              <a href="#">关于</a>
              <a href="#">支持</a>
              <a href="#">媒体中心</a>
              <a href="#">API</a>
              <a href="#">安全中心</a>
              <a href="#">隐私</a>
              <a href="#">法律</a>
              <a href="#">条款</a>
            </p>
          </div>
          <div class="flink">
            <h3>链接</h3>
            <p>
              <a href="#">使用帮助</a>
              <a href="#">服务社区</a>
              <a href="#">经典案例</a>
              <a href="#">商城官网</a>
            </p>
          </div>
          <div class="right">
            <ul>
              <li>
                <img src="../../assets/img/Hqianhe.png" alt=""/>
                <h3>云订阅号</h3>
              </li>
              <li>
                <img src="../../assets/img/Hqianhe.png" alt=""/>
                <h3>云服务号</h3>
              </li>
            </ul>
          </div>
        </div>
        <div class="footer_copyright">
          <p class="beian">
            <a href="#"><img src="../../assets/img/ba.png" alt=""/>&nbsp;黑ICP备2021000770号</a>
            <a href="#"><img src="../../assets/img/gs.png" alt=""/>&nbsp;工信部ICP备案</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bottom"
}
</script>

<style scoped>

.w1200 {
  width: 1200px;
  margin: 0 auto;
}

.w1200:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  clear: both;
}

.bottom .footer {
  padding-top: 20px;
  background: #222;
}

.bottom .footer .footer_top ul li {
  float: left;
  width: 278px;
  height: 78px;
  line-height: 78px;
  border: 1px solid #333;
  text-indent: 98px;
  color: #aaaaaa;
  margin-right: 20px;
}

.bottom .footer .footer_top ul li:last-child {
  margin-right: 0;
}

.bottom .footer .footer_top:after,
.bottom .footer .footer_down:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

.bottom .footer .footer_tel {
  border-bottom: 1px solid #333;
  height: 90px;
  margin: 0 auto;
  width: 1180px;
  padding-top: 30px;
  color: #aaa;
}

.bottom .footer .footer_tel .tel {
  float: left;
  font-size: 16px;
  width: 180px;
  height: 65px;
  padding-left: 100px;
}

.bottom .footer .footer_tel ul li {
  height: 90px;
  line-height: 60px;
  display: inline-block;
  padding: 0 20px;
}

.bottom .footer .footer_tel ul li:first-child {
  padding-left: 0;
}

.bottom .footer .footer_down {
  padding-top: 50px;
}

.bottom .footer .footer_down .left {
  float: left;
  width: 450px;
  padding-right: 20px;
}

.bottom .footer .footer_down .left h3,
.bottom .footer .footer_down .flink h3 {
  font-size: 16px;
  color: #fff;
  font-weight: normal;
}

.bottom .footer .footer_down .left p,
.bottom .footer .footer_down .flink p {
  font-size: 14px;
  padding-top: 20px;
}

.bottom .footer .footer_down .left p a,
.bottom .footer .footer_down .flink p a {
  font-size: 14px;
  color: #888;
  margin: 0 20px 15px 0;
  white-space: nowrap;
  display: inline-block;
}


.bottom .footer .footer_down .flink {
  float: left;
  width: 120px;
  padding-right: 20px;
}

.bottom .footer .footer_down .right {
  float: right;
}

.bottom .footer .footer_down .right ul li {
  float: left;
  width: 120px;
  height: 150px;
  margin-right: 40px;
  text-align: center;
}

.bottom .footer .footer_down .right ul li h3 {
  color: #888;
  padding-top: 15px;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
}


.bottom .footer .footer_copyright p.beian a {
  color: #888;
  padding-right: 20px;
  display: inline-block;
}

.bottom .footer .footer_copyright p.beian a img {
  vertical-align: middle;
}

</style>